<template>
  <div class="shop">
    <!-- 店名 -->
    <div class="head df jcsb">
      <div class="headL">
        <div class="title">{{ shopData.name }}</div>
        <div class="df aic">
          <van-rate v-model="shopData.score" color="#ffd21e" />
          <span class="scoreT">
            ({{ shopData.sellCount }}) &nbsp;月销售{{ shopData.sellCount }}
          </span>
        </div>
      </div>
      <div class="headR df fdc aic jcc">
        <van-icon name="like-o" class="heart" />
        <span class="collect">已收藏</span>
      </div>
    </div>
    <van-divider />
    <!-- 起送价格、时间、费用 -->
    <div class="contBox df jcsb">
      <div class="contList df aic jcc fdc">
        <span class="contTop">起送价格</span>
        <div class="contBot">
          <span class="contPrice num">{{ shopData.minPrice }}</span>
          <span class="contT">元</span>
        </div>
      </div>
      <div class="contList df aic jcc fdc">
        <span class="contTop">商家配送</span>
        <div class="contBot">
          <span class="contMoney num">{{ shopData.deliveryPrice }}</span>
          <span class="contT">元</span>
        </div>
      </div>
      <div class="contList df aic jcc fdc">
        <span class="contTop">平均配送时间</span>
        <div class="contBot">
          <span class="contTime num">{{ shopData.deliveryTime }}</span>
          <span class="contT">分钟</span>
        </div>
      </div>
    </div>

    <div class="bg"></div>

    <!-- 公告 -->
    <div class="notice">
      <div class="noticeTitle">活动与公告</div>
      <div class="noticeText">{{ shopData.bulletin }}</div>
    </div>
    <van-divider />
  </div>
</template>

<script>
import {getShopRateReq} from '@/api/shop'
import {mapActions, mapState} from 'vuex'
export default {
  data() {
    return {
      loading: true,
      shopRaTings: {},
      value: 3,
    }
  },
  methods: {
    ...mapActions('shop', ['A_getShopInfo']),
    async getShopRaTings() {
      let res = await getShopRateReq()
      let {data} = res.data

      // 赋值
      this.shopRaTings = data
    },
  },
  computed: {
    ...mapState('shop', ['shopData']),
  },
  created() {
    this.getShopRaTings()
    //初始化发请求
    this.A_getShopInfo()
  },
  mounted() {
    this.loading = false
  },
}
</script>

<style lang="scss" scoped>
.shop {
  height: 100%;
  background: #fff;
}
.head {
  padding: 20px 30px;
  .headL {
    .title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .scoreT {
      margin-left: 10px;
      color: #999;
    }
  }
  .headR {
    .heart {
      color: red;
    }
    .collect {
      margin-top: 5px;
      color: #999;
    }
  }
}
.contBox {
  // background: #000;
  padding: 15px 40px;
  padding-bottom: 25px;
  .contList {
    color: #999;
    .contTop {
      font-size: 13px;
      margin-bottom: 7px;
    }
    .contBot {
      .num {
        font-size: 20px;
        color: black;
        margin-right: 5px;
      }
    }
  }
}
.bg {
  width: 100%;
  height: 30px;
  background: #f4f5f7;
}
.notice {
  padding: 15px 30px;
  .noticeTitle {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .noticeText {
    color: #e75d37;
  }
}
</style>
